<template>
	<view class="tabHeader">
		<view class="title">
			<text class="iconfont">&#xe6b1;秒杀</text>
		</view>
		<view class="checkTab">
			<view :class="yh_type=='left'?'left active':'left'" @click="qh_type" data-type="left">
				本期
			</view>
			<view :class="yh_type=='right'?'right active':'right'" @click="qh_type" data-type="right">
				下期
			</view>
		</view>
	</view>
	<view class="kongbai"></view>
	<view class="shoplist" v-show="yh_type=='left'?'true':''">
		<view class="daojishi">
			<text>剩余时间：</text><text>1天23小时59分20秒</text>
		</view>
		<view class="listshop">
			<!-- 一个商品 -->
			<view class="list" v-for="(v,i) in dataList" :key='i' >
				<view class="list_left">
					<image :src="ip+v.yp_imgsrc" mode=""></image>
				</view>
				<view class="list_right">
					<view class="list_l_left">
						<text>{{v.yp_yaoqi}} {{v.yp_mingcheng}}</text>
					</view>
					<view class="list_r_right">
						<text>{{v.ms_jiage}}</text>
						<text>{{v.ms_miaoshajiage}}</text>
					</view>
					<view class="btn" @click="skip">
						<text>去抢购</text>

						<view class="uni-padding-wrap uni-common-mt">
							<view class="progress-box">
								<progress :percent="parseInt((v.ms_yimiaoshuliang/v.ms_kucun)*100)" font-size="30rpx" show-info border-radius="30"  backgroundColor="#dddfdd" activeColor="white" stroke-width="6" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 切换下期页面 -->
	<view class="shoplist" v-show="yh_type=='right'?'true':''">
		<view class="daojishi">
			<text>距离开始时间：</text><text>1天23小时59分20秒</text>
		</view>
		
		<view class="listshop">
			<!-- 一个商品 -->
			<view class="list" v-for="(v,i) in dataList" :key='i' >
				<view class="list_left">
					<image :src="ip+v.yp_imgsrc" mode=""></image>
				</view>
				<view class="list_right">
					<view class="list_l_left">
						<text>{{v.yp_yaoqi}} {{v.yp_mingcheng}}</text>
					</view>
					<view class="list_r_right">
						<text>{{v.ms_jiage}}</text>
						<text>{{v.ms_miaoshajiage}}</text>
					</view>
					<view class="btn" data-type='type' @click="tx_type" >
						<view class="">
							<text>提醒我</text>
									
							<view class="">
								<text>2193人设置</text>
							</view>
						</view>
						<!-- <view class="">
							<text>提醒我</text>
									
							<view class="">
								<text>2193人设置</text>
							</view>
						</view>
						 -->
					</view>
				</view>
			</view>
			<!-- 一个商品 -->
		
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,computed,onMounted} from 'vue'
	import {useStore} from 'vuex'
	import store from '../../store/index.js'
	import http from '../../utils/http.js'
	export default {
		setup() {
			const {state,commit,getters,dispatch} = useStore()
			onMounted(()=>{
				http({
					url:'/showSeckill',
					method:'get'
				}).then((res)=>{
					commit('ME/show',res.data.data)
					console.log(res.data.data)
				})
			})
			let data = reactive({
				ip:'http://localhost:8088',
				yh_type: 'left',
				qh_type: (e) => {
					data.yh_type = e.target.dataset.type
					console.log(e.target.dataset)
				},
				dataList:computed(()=>{
					return state.ME.data
				}),
				skip(){
					uni.navigateTo({
						url:'../classification-Details/classification-Details'
					})
				}
			});
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	.tabHeader{
		background-color: white;
		width: 100%;
		.title {
			padding: 20rpx 10rpx;
			text{
				font-size: 35rpx;
			}
		}
		position: fixed;
		.checkTab {
			display: flex;
			justify-content: space-around;
			font-size: 35rpx;
			flex-wrap: wrap;
		
			.left {
				flex: 1;
				text-align: center;
				padding: 22rpx 0;
		
				text {
					width: 100%;
				}
			}
		
			.right {
				flex: 1;
				padding: 22rpx 0;
				text-align: center;
		
				text {
					width: 100%;
				}
			}
		}
		
	}
	.kongbai{
		height: 180rpx;
	}
	.active {
		border-bottom: 2px solid red;
		color: red;
	}

	.shoplist {
		background-color: #ebeaec;
	}

	.daojishi {
		font-size: 30rpx;
		text-align: center;
		padding: 20rpx 0;

	}

	.listshop {
		.list:not(:first-child) {
			margin-top: 30rpx;
		}
	}

	.list:after {
		display: block;
		content: '';
		clear: both;
	}

	.list {
		padding: 20rpx 10rpx;
		background-color: white;
		font-size: 35rpx;

		.list_left {
			float: left;

			image {
				width: 180rpx;
				height: 200rpx;
			}
		}

		.list_right {
			// float: left;
			padding-top: 20rpx;
			box-sizing: border-box;

			.list_l_left {
				text {
					margin-left: 40rpx;
				}
			}

			.list_r_right {
				padding-top: 20rpx;

				text:nth-child(1) {
					margin-left: 60rpx;
					color: red;
				}

				text:nth-child(2) {
					margin-left: 60rpx;
					text-decoration: line-through;
					color: #8F8F94;
				}
			}

			.btn {
				margin-top: 20rpx;
				width: 300rpx;
				height: 80rpx;
				background-color: red;
				float: right;
				padding: 10rpx 20rpx;
				font-size: 30rpx;
				text{
					margin-left:25%;
					color: white;
				}
				progress{
					color: white;
				}
			}
		}

	}
</style>
